<template>

    <!--icon icons-0,1,2,3,4 icon-1,2,3,4-->
    <!--icon icons-0,1,2,3,4 icon-1,2,3,4-->
    <!--icon icons-0,1,2,3,4 icon-1,2,3,4-->
    <!--icon icons-0,1,2,3,4 icon-1,2,3,4-->
    <!--icon icons-0,1,2,3,4 icon-1,2,3,4-->
    <i class="icon" :class="[`icons-${IconsType}`,`icon-${IconType}`]"></i>
</template>

<script>
    // IocnsType: 图标有多少种分类: 5种分类
    //     0:decrease
    //     1:discount
    //     2:guarantee
    //     3:invoice
    //     4:special
    // IocnType: 一种类型的图标还有4种分类 (1,2,3,4)
    export default {
        props:["IconsType","IconType"],
        name: "index"
    }
</script>

<style scoped lang="less">
    @import "../../common/css/mixin";
    .icon{
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        &.icons-decrease {
            &.icon-1{
                width: 12px;
                height: 12px;
                .bg-image("decrease_1")
            }
            &.icon-2{
                width: 16px;
                height: 16px;
                .bg-image("decrease_2")
            }
            &.icon-3{
                width: 12px;
                height: 12px;
                .bg-image("decrease_3")
            }
            &.icon-4{
                width: 16px;
                height: 16px;
                .bg-image("decrease_4")
            }
        }
        &.icons-discount{
            &.icon-1{
                width: 12px;
                height: 12px;
                .bg-image("discount_1")
            }
            &.icon-2{
                width: 16px;
                height: 16px;
                .bg-image("discount_2")
            }
            &.icon-3{
                width: 12px;
                height: 12px;
                .bg-image("discount_3")
            }
            &.icon-4{
                width: 16px;
                height: 16px;
                .bg-image("discount_4")
            }
        }
        &.icons-guarantee{
            &.icon-1{
                width: 12px;
                height: 12px;
                .bg-image("guarantee_1")
            }
            &.icon-2{
                width: 16px;
                height: 16px;
                .bg-image("guarantee_2")
            }
            &.icon-3{
                width: 12px;
                height: 12px;
                .bg-image("guarantee_3")
            }
            &.icon-4{
                width: 16px;
                height: 16px;
                .bg-image("guarantee_4")
            }
        }
        &.icons-invoice{
            &.icon-1{
                width: 12px;
                height: 12px;
                .bg-image("invoice_1")
            }
            &.icon-2{
                width: 16px;
                height: 16px;
                .bg-image("invoice_2")
            }
            &.icon-3{
                width: 12px;
                height: 12px;
                .bg-image("invoice_3")
            }
            &.icon-4{
                width: 16px;
                height: 16px;
                .bg-image("invoice_4")
            }
        }
        &.icons-special{
            &.icon-1{
                width: 12px;
                height: 12px;
                .bg-image("special_1")
            }
            &.icon-2{
                width: 16px;
                height: 16px;
                .bg-image("special_2")
            }
            &.icon-3{
                width: 12px;
                height: 12px;
                .bg-image("special_3")
            }
            &.icon-4{
                width: 16px;
                height: 16px;
                .bg-image("special_4")
            }
        }
    }
</style>